<template>
  <div class="app-container">
    <el-card>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="handleAdd"
      >创建请假</el-button>
      <el-table :data="list">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="请假类型" prop="holidayType">
          <template slot-scope="scope">
            {{ scope.row.holidayType | dictionMapping(holidayTypeOptions) }}
          </template>
        </el-table-column>
        <el-table-column label="起始时间" prop="beginTime">
          <template slot-scope="scope">
            {{ parseTime(scope.row.beginTime,'{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endTime">
          <template slot-scope="scope">
            {{ parseTime(scope.row.endTime,'{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column label="时长（天）" prop="duration" />
        <el-table-column label="状态" prop="holidayState">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.holidayState | dictionMapping(processState) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.holidayState == 0" type="text" @click="handleSubmit(scope.row.id)">提交</el-button>
            <el-button v-if="scope.row.holidayState == 0" type="text" @click="handleEdit(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="formLoading" :title="title">
      <el-form :model="form">
        <el-form-item label="请假类型" prop="holidayType">
          <el-select v-model="form.holidayType" placeholder="请选择请假类型">
            <el-option v-for="item in holidayTypeOptions" :key="item.value" :label="item.key" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime">
          <el-date-picker v-model="form.beginTime" placeholder="请选择起始时间" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="截止时间" prop="endTime">
          <el-date-picker v-model="form.endTime" placeholder="请选择截止时间" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item label="时长" prop="duration">
          <el-input v-model.number="form.duration" placeholder="请输入时长（天）" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="handleCannel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getHolidayPage, createHoliday, submitProcess, getHolidayOfId } from '@/api/holiday'
export default {
  name: 'Holiday',
  data() {
    return {
      title: null,
      list: [],
      total: 0,
      formLoading: false,
      form: {},
      holidayTypeOptions: [
        {
          key: '病假',
          value: 1
        },
        {
          key: '事假',
          value: 2
        }
      ],
      processState: [
        {
          key: '待提交',
          value: 0
        },
        {
          key: '审批中',
          value: 1
        },
        {
          key: '已通过',
          value: 2
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getHolidayPage().then(response => {
        this.list = response.data.list
        this.total = response.data.total
      })
    },
    handleAdd() {
      this.title = '添加请假'
      this.formLoading = true
      this.reset()
    },
    handleEdit(id) {
      this.title = '编辑请假'
      this.formLoading = true
      this.reset()
      getHolidayOfId(id).then(response => {
        this.form = response.data
      })
    },
    handleCannel() {
      this.formLoading = false
    },
    submitForm() {
      if (!this.form.id) {
        createHoliday(this.form).then(response => {
          if (response.code !== 200) {
            this.$message({
              message: response.message,
              type: 'warning'
            })
            return
          } else {
            this.$message({
              message: response.message,
              type: 'success'
            })
            this.getList()
          }
          this.formLoading = false
        })
      }
    },
    reset() {
      this.form = {}
    },
    handleSubmit(id) {
      this.$confirm('确认提交申请？提交后无法进行修改！', '提交申请').then(success => {
        submitProcess(id).then(response => {
          if (response.code !== 200) {
            this.$message({
              message: response.message,
              type: 'warning'
            })
            return
          } else {
            this.$message({
              message: response.message,
              type: 'success'
            })
            this.getList()
          }
        })
      }).catch(e => {
        console.log('11')
      })
    }
  }
}
</script>

<style>

</style>
